import React, {ChangeEvent} from 'react';
import {Button, Input, Space} from "antd";
import {loginApi} from '@/api/Login.ts';

class LoginForm extends React.Component {
    // @ts-ignore
    constructor(props) {
        super(props);
        // 初始化状态
        this.state = {
            username: '',
            password: '',
        };
    }

    // 处理输入字段变化的函数
    handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        // 更新状态
        this.setState({
            [name]: value,
        });

        console.log(name, value);
    }

    // 处理登录的函数
    handleLogin = () => {
        // 在这里添加登录逻辑
        // console.log('New Login with:', this.state);
        loginApi( this.state).then((res) => {
            console.log(res);
        })
    }

    render() {
        return (
            <>
                <Space direction="vertical" size="large" style={{ display: 'flex' }}>
                    <Input name="username" placeholder="用户名" onChange={this.handleInputChange} />
                    <Input.Password name="password" placeholder="密码" onChange={this.handleInputChange}/>
                    {/* 验证码盒子 */}
                    <Button type="primary" className="loginBtn" onClick={this.handleLogin} block>登录</Button>
                </Space>
            </>
        )
    }
}

export default LoginForm;